<template>
  <card title="部门列表">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="
        float: right;
        margin: 20rpx 0;
        margin-bottom: 20px;
        margin-right: 20px;
      "
      @click="handleNewClick"
      >新建用户</el-button
    >
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        type="index"
        width="55"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        v-for="item in contenTableConfig.propList"
        :prop="item.prop"
        :label="item.label"
        :key="item"
        align="center"
      >
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template #default="scope">{{
          formatUtcString(scope.row.createAt)
        }}</template>
      </el-table-column>
      <el-table-column align="center" label="更新时间">
        <template #default="scope">{{
          formatUtcString(scope.row.updateAt)
        }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="primary"
            size="mini"
            plain
            >编辑</el-button
          >
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </card>
  <page-modal
    :modalConfig="modalConfig"
    ref="pageModalRef"
    :defualtInfo="defualtInfo"
    @handleComfirmClick="handleComfirmClick"
  ></page-modal>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { useStore } from 'vuex'
import { contenTableConfig } from './config/content.config'
import { formatUtcString } from '../../../../ultills/date-format'
import { modalConfig } from './config/modal.config'
import { usePageModal } from '../../../../hooks/usePageModal'
import { NewconstructionDepartment } from '../../../../service/mian/system/system'
import Card from '../../../../base-ui/card/src/card.vue'
import pageModal from '../../../../components/page-modal/index'
export default defineComponent({
  name: 'department',
  components: { Card, pageModal },
  setup() {
    const store = useStore()
    store.dispatch('system/departmentPageData', '/department/list')
    const tableData = computed(() => {
      return store.state.system.departmentList
    })
    const handleComfirmClick = (data) => {
      NewconstructionDepartment('/department', data)
      console.log(data)
    }
    // 新建和编辑
    const pageModalRef = ref()
    const handleNewClick = () => {
      pageModalRef.value.DialogVisible = true
    }
    // const [pageModalRef, defualtInfo, handleNewClick] = usePageModal(
    //   handleComfirmClick,
    //   undefined
    // )
    return {
      contenTableConfig,
      tableData,
      formatUtcString,
      modalConfig,
      pageModalRef,
      handleNewClick,
      // defualtInfo,
      handleComfirmClick
    }
  }
})
</script>

<style scoped></style>
